<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/*外边距margin属性:  【微调：文字或图片】
			 margin使用问题1： 自适应居中，建议使用div，套块元素、行内块元素、行内元素
			       使用问题2： 行元素，上下外边距失效  右左外边距
				     行元素：不可以设置宽高【高---不可以动上下】、在一行显示【宽---可以左右】
				   使用问题3：垂直外边距
				   使用问题4：垂直外边距
			*/
			img{
				border: 1px solid red;
				/*margin: 1个属性值 顺时针：上 右 下 左*/
				margin: 200px;
				/*margin: 2个属性值 顺时针：上下 左右*/
				margin: 10px 200px;
				/*常用：盒子自适应居中 ---失效
				  行内块：可以设置宽高、在一行显示、无法居中
				*/
				margin: 0 auto;
				/*margin: 3个属性值 顺时针：上 右左 下*/
				m argin: 100px 200px 300px;
				/*margin: 4个属性值 顺时针：上 右 下 左*/
				m argin: 100px 200px 300px 400px;
			}
			h1{
				/*块元素：可以设置宽高、不在一行显示、无法居中，内置文本
				    text-align:center;
				*/
				/*常用：盒子自适应居中 ---设置宽度 */
				width: 100%;
				border: 1px solid red;
				text-align: center;
				
			}
			span{
				/*
				    text-align:center;
				*/
				/*常用：盒子自适应居中 --- */
				width: 100%;
				border: 1px solid red;
				text-align: center;
			}
			
			div{
				width: ;
			}
		</style>
	</head>
	<body>
		<!--框模型、盒子模型：四个部分组成：
		                    外边距：边框以外四周，叫做外边距
							边框：--
							内边距：边距以内 与内容 之间距离，叫做内边距
							内容：块、行、行内元素本身宽高
		所有元素存在于框模型 -->
		<h1>块级模型</h1>
		<img src="img/圣诞.png" width="300px" height="300px" alt="" />
		<span>行内元素：圣诞</span>
	</body>
</html>